import React from 'react';
import { View, Text, PanResponder, Alert, Image, PermissionsAndroid, InteractionManager, StyleSheet, Platform, TextInput, NativeSyntheticEvent, TextInputChangeEventData, TextInputContentSizeChangeEventData, TextInputSelectionChangeEventData } from 'react-native';
import { M, fpx, px, $toast } from '@/components/mengti-ui/react-native'
import { observable, action } from 'mobx';
import { observer } from 'mobx-react';
import { MessageInputProps } from './MessageInput.PropType';

@observer
class MessageInput extends React.Component<MessageInputProps> {

  inputRef: TextInput | null = null;
  @observable inputHeight = 0;
  @action clearTextInput() {
    this.props.onChange('');
    this.inputHeight = 0;
    this.inputRef?.clear();
  }

  @action
  handleInputChange = (event: NativeSyntheticEvent<TextInputChangeEventData>) => {
    let text = event.nativeEvent.text;
    this.props.onChange && this.props.onChange(text);
  }

  handleInputFocus = () => {
    this.props.onFocus && this.props.onFocus();
  }

  

  @action handleContentSizeChange = (event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
    let { height } = event.nativeEvent.contentSize;
    // this.inputHeight = height < 150 ? height : 150
    if (height > 150) height = 150;
    this.inputHeight = height;
  }

  onInputSelectionChange = (event: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
    const { start, end } = event.nativeEvent.selection;
    this.props.onSelectionChange && this.props.onSelectionChange({
      selectionStart: start,
      selectionEnd: end
    });
  }

  render() {
    const { display, value } = this.props;
    return (
      <TextInput
        ref={node => this.inputRef = node}
        value={value}
        onFocus={this.handleInputFocus}
        onChange={this.handleInputChange}
        // onContentSizeChange={this.handleContentSizeChange}
        onSelectionChange={this.onInputSelectionChange}
        placeholder="说点什么吧..."
        autoCorrect={false}
        underlineColorAndroid="transparent"
        keyboardType="default"
        multiline={true}
        style={[{
          width: px(510),
          textAlignVertical: 'center',
          paddingVertical: px(5), 
          paddingHorizontal: px(10),
          lineHeight: px(32),
          fontSize: px(28),
        }, !display && M['display-none']]}
      />
    )
  }

}

export default MessageInput;
